<template>
	<view class="box">
		<view class="border_kong"></view>
		<view class="top_title">
			<view class="title">{{offerobj.title}}</view>
			<view class="title_time">{{offerobj.createtime}}</view>
		</view>
		<view class="big_box">
			<view class="offer_cennt">
				<block v-for='(item,index) in offerobj.images' :key='index'>
					<image class="offer_cennter " :src="picture.getImgUrl(item)" mode="" @click="previewImage(index,offerobj.images)"></image>
				</block>
			</view>
			<view class="center_mage ">
				<view class='chapterview'>
					<image src="../../static/image/zpzx_ico_yd@2x.png" mode=""></image>
					<view class="offer_num">{{offerobj.read_num}}</view>
					
				</view>
			</view>
		</view>
		<view class="border_kong"></view>
		<view class="other_offer">
			<view class="other_top" v-if='last.is_have == 1' @click='gosee(last.id)'>上一篇：{{last.title}}</view>
			<!-- <view class="other_kong"></view> -->
			<view class="other_ran" v-if='next.is_have == 1'  @click='gosee(next.id)'>下一篇：{{next.title}}</view>
		</view>
	</view>
</template>

<script>
	import {offerread} from '@/api/index.js'
	export default {
		data() {
			return {
				id:'',
				last:'',
				next:'',
				offerobj:''
			}
		},
		onLoad(option) {
			this.id = option.id
			this._getofferdetail()
		},
		methods: {
			// 多图预览
			previewImage(indexImg, photoImg) {
				var that=this
			   let photoList = photoImg.map(item => {
			        let newImg = that.baseUrl + item
			    return newImg;
			      }); 
				  //  这一步是为了给每一条图片数据，添加 'data:image/jpeg;base64,'。如果你的图片数据是完整的base64。此条步骤可以省略
			   uni.previewImage({
			    current: indexImg,
			    urls: photoList
			   });
			  },
			_getofferdetail(){
				let obj = {
					id:this.id
				}
				offerread(obj).then(res=>{
					if(res.code == 1){
						this.offerobj = res.data.info
						this.last = res.data.last
						this.next = res.data.next
					}else{
						this.$msg(res.msg)
					}
				})
					
			},
			gosee(id){
				let obj = {
					id:id
				}
				offerread(obj).then(res=>{
					if(res.code == 1){
						this.offerobj = res.data.info
						this.last = res.data.last
						this.next = res.data.next
					}else{
						this.$msg(res.msg)
					}
				})
			}
		}
	}
</script>

<style>
	.box {
		width: 100%;
		/* height: 100%; */
		height:auto;
		color: #333333;
		text-align: center;
	}
	.other_offer {
		width: 100%;
		height: auto;
		background-color: #FFFFFF;
	}
	.other_top {
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 0 50rpx;
		border-bottom: 1rpx solid #F5F5F5;
	}
	.other_kong{
		width: 690rpx;
		height: 1rpx;
		background: #000000;
		opacity: 0.1;
		margin: 0 auto;
	}
	.other_ran {
		width: 100%;
		height: 100rpx;
		padding: 0 50rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	
	.big_box {
		width: 100%;
		/* height: 1040rpx; */
		height:auto;
		/* border:1rpx solid red; */
		background-color: #FFFFFF;
	}

	.offer_cennter {
		width: 690rpx;
		height: 900rpx;
		margin-top: 30rpx;
		
	}

	.border_kong {
		width: 100%;
		height: 20rpx;
		background-color: #F5F5F5;
	}

	.top_title {
		width: 100%;
		height: 80rpx;
		line-height: 50rpx;
		padding-left: 30rpx;
		background-color: #FFFFFF;
	}

	.title {
		padding-top: 20rpx;
		font-size: 33rpx;
		font-weight: 600;
	}

	.title_time {
		color: #999999;
		font-size: 22rpx;
		margin-bottom: 50rpx;
	}

	.center_mage {
		display: flex;
		justify-content: flex-end;
		width: 100%;
		height: 90rpx;
		background-color: #FFFFFF;
		padding-right:30rpx;
		/* border: solid 1rpx red; */
	}
	.chapterview{
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.offer_num {
		font-size: 22rpx;
		width:42rpx;
		text-align: center;
	}

	.chapterview image {
		width: 42rpx;
		height: 40rpx;
		border-left-color: #FFFFFF;
		margin-bottom: 10rpx;
	}
</style>
